<template>
	<view class="content">
		<u-navbar :autoBack="false" :bgColor="background">
			<template #left>
				<view class="u-flex">
					<u--image width="40rpx" height="40rpx"
						:src="$z.imgsrc('4697e5caf9f245ab94550b351a1a0a3c.png')"></u--image>
					<view class="dz">
						浙江省杭州市
					</view>
				</view>
			</template>
			<template #right>
				<view class="lin">
					<u-badge :value="value" :absolute="true" :offset="offset"></u-badge>
					<u--image width="28rpx" height="28rpx"
						:src="$z.imgsrc('e49583aa479244888978ca66028aef84.png')"></u--image>
				</view>
			</template>
		</u-navbar>
		<view class="bj"></view>

		<view class="" style="flex: 1;height: 0;">
			<!-- :onPullingfalge="false" -->
			<getdatascrollview ref="getdatascrollview" :api="api" :seardata="searchdata">
				<template v-slot="{ list }">
					<view>
						<view class="u-flex u-flex-center" style="margin: 16rpx 0;">
							<u--image width="714rpx" height="356rpx"
								:src="$z.imgsrc('78354cdbefcf450eb4595a570ad1bdb3.png')"></u--image>
						</view>
						<u-sticky offset-top="0">
							<view class="" style="background: #fff;">
								<view class="" style="padding: 20rpx 30rpx;">
									<u-search placeholder="物流单号" v-model="searchdata.logisticsOrderId"
										:showAction="false" @search="search"></u-search>
								</view>
								<view class="" style="padding: 20rpx 30rpx;">
									<u-search placeholder="订单单号" v-model="searchdata.orderId" @search="search"
										@custom="search"></u-search>
								</view>
							</view>
						</u-sticky>
						<!-- deliveryStartTime -->
						<listcard v-for="item in list" :item="item"></listcard>
					</view>
				</template>
			</getdatascrollview>
		</view>

		<tabbar></tabbar>
	</view>
</template>

<script>
	import {
		routePlanningInfoRecordPage
	} from "@/api/routePlanningInfo.js"
	export default {
		data() {
			return {
				searchdata: {
					logisticsOrderId: '',
					orderId: ""
				},
				// inputdata: {
				// 	logisticsOrderId: '',
				// 	orderId: ""
				// },
				offset: [-3, -6],
				background: "#F2E7E0",
				value: 5,
				btnstyle: {
					height: "72rpx",
					fontSize: "26rpx",
					lineHeight: "30rpx"
				},
				status: "loadmore"

			}
		},
		onShow() {
			this.$refs.getdatascrollview && this.$refs.getdatascrollview.onRefresh()
		},
		methods: {
			async api(reqdata) {
				let data = await routePlanningInfoRecordPage({
					...reqdata,
					driverId: this.$store.state.user.user.sjdata.id
				})
				// return {
				// 	data: {
				// 		records: [{}, {}, {}, {}, {}, {}, ]
				// 	}
				// }
				return data
			},
			search() {
				this.$refs.getdatascrollview && this.$refs.getdatascrollview.onRefresh()
			}
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.dz {
			font-size: 30rpx;
			line-height: 32rpx;
		}

		.lin {
			width: 56rpx;
			height: 56rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #fff;
			border-radius: 50%;
			position: relative;
		}

		.bj {
			width: 100%;
			height: 346rpx;
			position: fixed;
			top: 80rpx;
			background: linear-gradient(to bottom, #F2E7E0, #F5F5F5);
		}

		.itemcard {
			margin: 16rpx 18rpx;
			background-color: #fff;
			border-radius: 20rpx;
			position: relative;

			.title {
				height: 88rpx;
				padding: 0 24rpx;

				.l {
					font-size: 28rpx;
				}

				.r {
					color: #DC2626;
					font-weight: bold;
					font-size: 42rpx;

					.dw {
						font-size: 26rpx;
						padding-right: 10rpx;
					}
				}
			}

			.s {
				align-items: flex-start;
				padding: 0 24rpx;
				padding-bottom: 28rpx;

				.l {
					width: 68rpx;
					height: 68rpx;
					border-radius: 28rpx;
					background: #DC2626;
					color: #fff;
					font-size: 36rpx;
					transform: scale(0.5);
					margin: -12rpx -17rpx;
					// margin-left: -17rpx;
				}

				.r {
					padding-left: 24rpx;
					color: #181A1E;
					font-size: 30rpx;
					line-height: 44rpx;
				}

			}

			.f {
				align-items: flex-start;
				padding: 0 24rpx;
				position: relative;

				&::after {
					content: "";
					// width: 2rpx;
					border-left: 2rpx dashed #C0C0C0;
					// height: 10rpx;
					// background: #000;
					position: absolute;
					left: 40rpx;
					top: 46rpx;
					bottom: 0;
				}

				.l {
					width: 68rpx;
					height: 68rpx;
					border-radius: 28rpx;
					background: #181A1E;
					color: #fff;
					font-size: 36rpx;
					transform: scale(0.5);
					margin: -12rpx -17rpx;
					// margin-left: -17rpx;
				}

				.r {
					padding-left: 24rpx;
					padding-top: 10rpx;
					padding-bottom: 44rpx;

					.t {
						color: #181A1E;
						font-size: 30rpx;
						line-height: 32rpx;

						.jl {
							color: #999999;
							font-size: 24rpx;
							padding-left: 10rpx;
						}
					}

					.b {
						color: #999999;
						font-size: 24rpx;
						margin-top: 14rpx;
						line-height: 32rpx;
					}
				}
			}
		}
	}
</style>